<template >
    
    <a-modal
        :title="$t('Edit')+$t('Pool')"
        v-model='modifypool'
        @cancel='cancelhandle'
        width='40%'
        @ok='subm'
        :cancelText="$t('Cancel')"
        :okText="$t('Sure')"
        :maskClosable='false'
        v-dragModal
    >
        <a-spin size="large" style="position:absolute;left:50%; top:50%; transform: translate(-50%, -50%);z-index:1;background:rgba(255,255,255,.6);padding:10%" tip="Submit successfully Loading..." v-if="spinning == true"></a-spin>
        <a-form :form='form'>
            <a-form-item
            :label="$t('Pool')+$t('Name')"
            v-bind="formlayout"
            has-feedback>
            <a-input
                :placeholder="$t('Enter') + $t('Pool')+$t('Name')"
                v-decorator="['replica_name',
                {rules: poolNameRule,initialValue:tarname.name}]"
                :disabled="tarname.default"
            />
            </a-form-item>
            <a-form-item :label="$t('Pool')+$t('Type')" v-bind='formlayout' has-feedback>
                <a-select v-decorator="['pool_type',{
                    rules:[{required:true,message:$t('Choose') + $t('Pool')+$t('Type')}],initialValue:tarname.type
                }]" disabled>
                	<a-select-option v-for='t in typedata' :key='t.val'>{{t.label}}</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item :label="$t('Data-slice')+$t('Amount')" v-bind='formlayout' has-feedback>
                <!-- <a-input-number v-decorator="['replica_pg',{
                    rules:[{required:true,message:$t('Enter') + $t('Data-slice')+$t('Amount')}],initialValue:tarname.pg_num
                }]" :min='1' :placeholder="$t('E-g')+'1'">
                </a-input-number> -->
                <a-input v-decorator="['replica_pg',{
                    rules:[
                    {required:true,message:$t('Enter') + $t('Data-slice')+$t('Amount')},
                    {pattern:/^([1-9]|[1-9]\d{1,9})$/,message: $t('Quota_rule_prompt')}
                    ],initialValue:tarname.pg_num
                }]" :placeholder="$t('E-g')+'1'">
                </a-input>
            </a-form-item>
            <a-form-item :label="$t('Erasure-config')" v-bind='formlayout' has-feedback v-if='tarname.type == "erasure"'>
                <a-row>
                    <a-col :span='20'>
                        <a-select 
                        	v-decorator="[
			                'erasure_code_profile',
			                {rules: [{ required: true, message: $t('Choose') + $t('Erasure-config') },{pattern:namePattern,message:$t('Not_enter_special_characters')}],initialValue:tarname.ec_profile
			                }]"  disabled>
                            <a-select-option value='2'>2</a-select-option>
                        </a-select>
                    </a-col>
                    <a-col :span='4'>
                        <a-button icon='question-circle'></a-button>
                    </a-col>
                </a-row>
            </a-form-item>
            <a-form-item :label="$t('Duplicate')+$t('Amount')" v-bind="formlayout" has-feedback v-if='tarname.type == "replicated"'>
                <a-input-number v-decorator="['replica_size',{
                    rules:[{required:true,message:$t('Enter') + $t('Duplicate')+$t('Amount')}],initialValue:tarname.size
                    }]" :min='1'>
                </a-input-number>
            </a-form-item>
            <!-- <a-form-item :label="$t('Mark')" v-bind='formlayout' has-feedback v-if='tarname.type == "erasure"'>
                <a-checkbox  v-decorator="['flags',{
                    rules:[{required:true,message:$t('Choose') + $t('Mark')}],initialValue:tarname.flags
                }]" :checked='tarname.flags' disabled>
                    {{$t('Full-support')}}（{{$t('Block')}}，{{$t('File-system')}}，{{$t('Object-storage')}}）
                	注释：全应用支持（块设备，文件系统，对象存储
                </a-checkbox>
            </a-form-item> -->
            
            <a-form-item :label="$t('App-Type')" v-bind='formlayout' v-if="!tarname.is_tier">
                <a-checkbox-group v-decorator="['replica_apps',{
                    rules:[{required:true,message:$t('Choose') + $t('App-Type')}],initialValue:tarname.applications
                }]" :checked="tarname.applications">
                <a-row>
                    <a-col :span='8' v-show="poolType != 'erasure'">
                        <a-checkbox value='cephfs'>
                            {{$t('File-system')}}
                        </a-checkbox>
                    </a-col>
                    <a-col :span='8' v-show="poolType != 'erasure'">
                        <a-checkbox value='rbd'>
                            {{$t('Block')}}
                        </a-checkbox>
                    </a-col>
                    <a-col :span='8'>
                        <a-checkbox value='rgw'>
                            {{$t('Object-storage')}}
                        </a-checkbox>
                    </a-col>
                </a-row>
                </a-checkbox-group>
            </a-form-item>
            <div style="text-align:center" class="red">{{$t('Edit-Pool-Tip')}}！！！</div>
            <!--<hr/>
            <p>数据压缩</p>
            <a-form-item label='模式' v-bind="formlayout" has-feedback>
                <a-select v-decorator="['poolmodel',{
                    initialValue:'none',
                    rules:[{required:true,message:'请选择模式'}]
                }]">
                    <a-select-option v-for='m in modeldata' :key='m.val'>{{m.label}}</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label='压缩算法' v-bind='formlayout' has-feedback  v-if='form.getFieldValue("poolmodel") == "2" || form.getFieldValue("poolmodel") == "3" || form.getFieldValue("poolmodel") == "4" || form.getFieldValue("poolmodel") == "5"'>
                <a-select v-decorator="['compression',{
                    rules:[{required:true,message:'请选择算法'}]
                }]">
                    <a-select-option v-for='c in compdata' :key='c.val'>{{c.label}}</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label='最小压缩对象' v-bind='formlayout'  v-if='form.getFieldValue("poolmodel") == "2" || form.getFieldValue("poolmodel") == "3" || form.getFieldValue("poolmodel") == "4" || form.getFieldValue("poolmodel") == "5"'>
                <a-row>
                    <a-col :span='12'>
                        <a-input-number v-decorator="['min',{
                            rules:[{required:true,message:'请输入最小压缩对象'}]
                        }]" palceholder='例如：128'>
                        </a-input-number>
                    </a-col>
                    <a-col :span='12'>
                        <a-select defaultValue="KiB">
                            <a-select-option v-for='u in unitdata' :key='u.val'>{{u.label}}</a-select-option>
                        </a-select>
                    </a-col>
                </a-row>
            </a-form-item>
            <a-form-item label='最大压缩对象' v-bind='formlayout' v-if='form.getFieldValue("poolmodel") == "2" || form.getFieldValue("poolmodel") == "3" || form.getFieldValue("poolmodel") == "4" || form.getFieldValue("poolmodel") == "5"' >
                <a-row>
                    <a-col :span='12'>
                        <a-input-number v-decorator="['max',{
                            rules:[{required:true,message:'请输入最大压缩对象'}]
                        }]" placeholder='例如：512'>
                        </a-input-number>
                    </a-col>
                    <a-col :span='12'>
                        <a-select defaultValue="KiB">
                            <a-select-option v-for='u in unitdata' :key='u.val'>{{u.label}}</a-select-option>
                        </a-select>
                    </a-col>
                </a-row>
            </a-form-item>
            <a-form-item label='压缩比率' v-bind='formlayout' has-feedback  v-if='form.getFieldValue("poolmodel") == "2" || form.getFieldValue("poolmodel") == "3" || form.getFieldValue("poolmodel") == "4" || form.getFieldValue("poolmodel") == "5"' >
                <a-input-number v-decorator="['rate',{
                    rules:[{required:true,message:'请输入压缩比率'}]
                }]">
                </a-input-number>
            </a-form-item>-->
        </a-form>
    </a-modal>
</template>
<script>
import request from '@/request/request'

export default {
    name:'mpool',
    props:['mdpool','tarname'],
    data(){
        return{
            form: this.$form.createForm(this),
            formlayout:{
                labelCol:{span:6},
                wrapperCol:{span:14}
            },
            modifypool:false,
            // mmodel:'none',
            typedata:[],
            modeldata:[{val:'1',label:'node'},{val:'2',label:'passive'},{val:'3',label:'aggressive'},{val:'4',label:'force'},{val:'5',label:'unset'}],
            compdata:[{val:'snappy',label:'snappy'},{val:'zlib',label:'zlib'},{val:'zstd',label:'zstd'},{val:'lz4',label:'lz4'}],
            unitdata:[{val:'KiB',label:'KiB'},{val:'MiB',label:'MiB'},{val:'GiB',label:'GiB'},{val:'TiB',label:'TiB'}],
            spinning:false,
            poolType: '',
            poolNameRule: []
        }
    },
    watch:{
        mdpool(val){
            this.modifypool = val;
            this.typedata=[{val:'replicated',label:this.$t('Duplicate')},{val:'erasure',label:this.$t('Erasure')}];
            this.poolType = this.tarname.type;
        },
        tarname() {
            if(this.tarname.default) {
                this.poolNameRule = [];
            }else {
                this.poolNameRule = [{ required: true, message: this.$t('Enter')+this.$t('Pool')+this.$t('Name') },{pattern:this.namePattern,message: this.$t('Not_enter_special_characters')}];
            }
        },
    },
    methods:{
        cancelhandle(e){
            this.form.resetFields()
            // this.modifypool=false
            // this.mmodel='none'
            this.spinning=false
            this.$emit('mmodal', false, true)
        },
        subm(e){
            e.preventDefault();
            this.form.validateFields((err,value)=>{
                let pool_name = '';
                if(value.replica_name == this.tarname.name) {
                    pool_name = undefined;
                }else {
                    pool_name = value.replica_name;
                }
                if(!err){
                    this.spinning = true
                    // this.$axios({
					// 	method: 'post',
					// 	url: this.allurl+'pool/update',// 原来为pool/
					// 	data: {
                    //         pool_id: this.tarname.id,
                    //         pool_name: pool_name,
                    //         pg_num: value.replica_pg,  //数据切片数
                    //         applications: value.replica_apps, //应用类型
                    //         size: value.replica_size,  //副本数
                    //         // pool:this.tarname.name,
	                //     	// replica_name:value.replica_name,
	                //     	// replica_pg:value.replica_pg,
	                //     	// replica_size:value.replica_size,
	                //     	// replica_apps:value.replica_apps
	                //     }
                    // })
                    request('post', 'pool/update', {
                        pool_id: this.tarname.id,
                        pool_name: pool_name,
                        pg_num: value.replica_pg,  //数据切片数
                        applications: value.replica_apps, //应用类型
                        size: value.replica_size,  //副本数
                    })
                    .then(res=>{
                        // console.log('编辑池操作', res)
                        this.model(res.data.id) //返回模板
                        this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
					    // this.gettask()  //任务栏信息
                        this.spinning = false
						// this.modifypool=false
						this.form.resetFields()  //重置弹窗
                    	this.$emit('mmodal',false, false) //关闭弹窗
                    }).catch(err => {
                        this.spinning = false;
						this.form.resetFields();
                    	this.$emit('mmodal',false, false); //关闭弹窗
                    })
                }
            })
        },
    }
}
</script>
<style scoped>
    .ant-checkbox-group{
        width: 100%;
        line-height: 3em
    }
</style>
